<template> <div class="block">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        :disabled-date="disabledDate"
        :size="size"
        format="YYYY/MM/DD"
       
      />
    </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div class="block">
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="选择日期"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY/MM/DD"
        
      />
    </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div class="block">
         <el-button plain @click="timeChange">确定</el-button>
      </div>
      
</template>

<script>
import {ref} from 'vue'
import mitt from '../../../../../mock1/mitt';

export default {
  setup() {

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
const timeChange =()=>{
  if(value1.value){
    if(value2.value){
          let d = new Date(value1.value).getTime(); 
          let f = new Date(value2.value).getTime(); 
            mitt.emit('msg',{d:d,f:f})
    }else{
      return;
    }
  }else{
    return;
  }
}


return {
  value1,value2,disabledDate,shortcuts,timeChange
}
    
  },
}
</script>
<style lang="less" scoped>
  .block{
    display: inline-block;
    position: relative;
  }
.el-button{
  position: absolute;
  top: -22px;
  left: 0;

}
 
</style>